<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>身份关联</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{ height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*选择已有身份*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.p-list{margin:10px 0;background: #fff;  }
.p-list a{ display: block;overflow: hidden; padding:0 18px;line-height: 50px; font-size: 15px;color:#010101; }
.p-list a i{ float:right;margin-left:5px;height:50px; width: 20px;  }
.weui-cells_checkbox{ padding:10px 15px; }
.weui-flex{padding:0 5px;margin-bottom: 10px; line-height:26px; border:1px solid #f2f2f2; border-radius: 5px;}
.sw-name{font-size: 14px; font-weight: 600; color:#646464;overflow:hidden; white-space:nowrap;text-overflow:ellipsis; }
.sw-role{padding-left:10px;font-size: 12px; color: #646464;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
.sw-icon{ transform: scale(0.8); margin-bottom: 3px; }
.weui-cells_checkbox .active{ background:#f2f6ff; border:1px solid #f2f6ff;}
/*添加身份*/
.xl-cont p{ padding:18px; font-size: 12px; color: #e58b00; background: #f3f4f9;   }
.sf-add li{position: relative; padding:0 18px; height: 50px; font-size: 15px;border-bottom: 1px solid #f2f2f2;text-align: right;color:#343434;}
.sf-add li span{ position: absolute; left:18px; top:0; width: 100px; text-align: left; line-height: 50px;  }
.sf-add li input{ padding-left: 100px; height: 100%; width: 100%;  text-align: right;}
.p-list .bordernone{border:0;}
/*底部按钮*/
.botm{  padding:25px;  }
.botm a{  display: block; width: 100%; padding:10px; border-radius: 5px; line-height: 20px;
             text-align: center; font-size: 15px; background: #1d9cfd linear-gradient(to right,#06b8fe,#278ffe); color:#fff;}
/*辅助类*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
.bixuan{ background: url(../img/bx_03.png) 7px center no-repeat; background-size:9px;} 

.kongTip{ text-align: center; color: #999; font-size: 13px; }
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab" style="position:fixed;top:0;width: 100%;">
             <!-- 头部 -->
              <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                      <span class="t-title">身份关联</span>  
                      <a  class="g-other"></a>
              </div>
              <!-- 内容区 -->
              <div class="weui-tab__bd page-wrap" >  
                     <div class="p-list" id="selectSF">
                          <a class="list-btn">
                            <i class="g-down"></i>
                            <span class="left">选择已有身份</span>
                          </a>
                          <p class="kongTip">暂无任何身份,请添加身份</p>
                          <div class="weui-cells_checkbox xialakuang" id="addBD">
                                  <label class="weui-check__label">
                                        <div class="weui-flex sf-lists active">
                                          <div class="sw-name">
                                             赵丽丽(家长)
                                          </div>
                                          <div class="weui-flex__item sw-role">
                                             赵武文的妈妈(1年级7班)
                                          </div>
                                          <div class="">
                                              <input type="radio" class="weui-check" name="checkbox1"checked="checked">
                                            <i class="weui-icon-checked sw-icon"></i>
                                          </div>
                                        </div>
                                  </label>
                                  <label class="weui-check__label">
                                        <div class="weui-flex sf-lists">
                                          <div class="sw-name">
                                             赵武文(家长)
                                          </div>
                                          <div class="weui-flex__item sw-role">
                                             赵武文的爸爸(1年级7班)
                                          </div>
                                          <div class="">
                                              <input type="radio" class="weui-check" name="checkbox1">
                                            <i class="weui-icon-checked sw-icon"></i>
                                          </div>
                                        </div>
                                  </label>
                          </div>                         
                     </div>
                     
                     <div class="p-list">
                          <a class="list-btn">
                             <i class="g-up"></i>
                             <span style="color: red;"> + </span>添加身份
                          </a>
                          <div class="xl-cont xialakuang" style="display: none;">
                              <p>请填写身份关联信息：家长身份绑定方式-请输入学生姓名和学生绑定密匙绑定身份认证</p>
                              <ul class="sf-add">
                                    <li class="bixuan"><span>角色名称</span><input type="text" placeholder="请输入"></li>
                                    <li class="bixuan"><span>学生名称</span><input type="text" placeholder="请输入"></li>
                                    <li class="bixuan"><span>所在班级</span><input type="text" placeholder="请输入"></li>
                                    <li class="bixuan"><span>绑定密匙</span><input type="text" placeholder="请输入"></li>
                                    <li><span>关系</span><input type="text" placeholder="请输入"></li>             
                              </ul>
                              <div class="botm">
                                    <a id="okBtn">提 &nbsp; &nbsp; 交</a>
                              </div>
                          </div>        
                     </div>

                    <div class="botm">
                      <a id="offBtn" style="background: #fff; color:#278ffe; ">解除身份绑定</a>
                      <a id="offBtn2" style="background: #fff; color:#278ffe; display: none;">解除身份绑定</a>
                    </div>   

              </div>
      </div>
  </div>
</body>
<script>
// 本地储存, 作用:状态管理
var num = +sessionStorage.num1;
if( !!num && num == 2 ){
     $("#selectSF").hide();
     $("#offBtn").hide();
     $("#offBtn2").show();
}
if( !!num && num == 1 ){
     $("#selectSF").show();
     $("#offBtn2").hide();
     $("#offBtn1").show();
}

// 下拉点击效果
$('.list-btn').click(function(){
    if ($(this).find('i').hasClass('g-down')) {
       $(this).find('i').removeClass('g-down').addClass("g-up");
       $(this).nextAll(".xialakuang").slideUp();
    }else{
       $(this).find('i').removeClass('g-up').addClass("g-down");
       $(this).nextAll(".xialakuang").slideDown();
    }
})

// 添加身份按钮
$("#okBtn").click(function(){          
   var inps = $(".sf-add").find("input");
   if ( !inps.eq(0).val() ) {
       alert("请输入角色名称！");
       inps[0].focus();
       return;
   }
   if ( !inps.eq(1).val() ) {
       alert("请输入学生名称！");
       inps[1].focus();
       return;
   }
   if ( !inps.eq(2).val() ) {
       alert("请输入所在班级！");
       inps[2].focus();
       return;
   }
   if ( !inps.eq(3).val() ) {
       alert("请输入密匙！");
       inps[3].focus();
       return;
   }
   var d1 = $(
        '<label class="weui-check__label">'+
            '<div class="weui-flex sf-lists">'+
              '<div class="sw-name">'+
                 inps.eq(0).val()+
              '</div>'+
              '<div class="weui-flex__item sw-role">'+
                 inps.eq(1).val()+'的'+inps.eq(4).val()+'('+inps.eq(2).val() +')'+
              '</div>'+
              '<div class="">'+
                  '<input type="radio" class="weui-check" name="checkbox1">'+
                '<i class="weui-icon-checked sw-icon"></i>'+
              '</div>'+
            '</div>'+
        '</label>'
   );
   $("#addBD").prepend(d1);

   $(".sf-lists").click(function(){
    $(this).parent().parent().find(".sf-lists").removeClass("active");
    $(this).addClass("active");
   });
   kongtip();
})

// 解除身份绑定按钮(家长)
$("#offBtn").click(function(){
    if( $("#addBD input:checked").length == 0){
          $.alert("请先选择要解除的身份");
          return;
    }
    $.confirm("确认解除当前身份!", function() {
            $("#addBD input:checked").parent().parent().parent().remove();
            kongtip();
    }, function() {
          //点击取消后的回调函数
    }); 
})
// 解除身份绑定按钮(教师)
$("#offBtn2").click(function(){
    $.confirm("确认解除当前身份!", function() {
          $.alert("解除成功!")
    }, function() {
          //点击取消后的回调函数
    }); 
})

function  kongtip(){
     if( $("#addBD").find("label").length == 0 ){
         $(".kongTip").show();
    }else{
         $(".kongTip").hide();      
    } 
}
kongtip();

</script>

</html>